<template>
   <div class="l-tab-page" style="padding:8px;" >
      <div class="l-rblock" >
        <el-tabs tab-position="left" :stretch="true" v-model="activeName">
            <el-tab-pane label="所有文件" name="first" :key="'first'">
                <l-layout class="l-tab-page">
                    <l-panel style="padding:0;" >
                        <template #toolLeft >
                            <div class="l-panel--item" >
                                <el-input placeholder="请输入查询关键字" @keyup.enter.native="handleSearch"  v-model="keyWord" size="mini" >
                                    <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
                                </el-input>
                            </div>
                        </template>
                        <template #toolRight >
                            <l-tool-btns @click="handleAdd()" :btnText="$t('创建文件')" >
                                <el-button-group>
                                    <el-button size="mini" icon="el-icon-folder">{{$t('文件夹管理')}}</el-button>
                                    <el-button size="mini" icon="el-icon-magic-stick">{{$t('文件授权')}}</el-button>
                                </el-button-group>
                            </l-tool-btns>
                        </template>
                        <l-table ref="mainTable" 
                            :loading="tableLoading" 
                            :columns="lr_getPageColumns(columns)" 
                            :dataSource="tableData"
                            >
                            <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
                        </l-table>
                    </l-panel>
                </l-layout>
            </el-tab-pane>
            <el-tab-pane label="回收站"  name="second" :key="'second'">

            </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

<script>
const api = window.$api.oa.fileInfo
export default {
  components: {
  },
  data() {
    return {
        lr_isPage:true,
        activeName: 'first',

        tableLoading:false,
        tableData:[],
        columns: [
            {label:'文件名',prop:'f_Name',minWidth:160,align:'left'},
            {label:'文件编号',prop:'f_Code',width:120,align:'left'},
            {label:'文件版本',prop:'f_Ver',width:80,align:'center'},
            {label:'大小',prop:'f_FileSize',width:100,align:'center'},
        ],
        tableBtns:[
            {prop:'Look',label:'查看'},
            {prop:'Delete',label:'删除'},
        ],
        keyWord:'',
        folderId:'0'
    };
  },
  mounted(){
      this.loadTableData()
  },
  methods: {   
    handleSearch(){

    },  
    async loadTableData(){
        this.tableLoading = true
        const params = {
            keyWord:this.keyWord,
            folderId:this.folderId
        }
        const data = await this.$awaitWraper(api.getList(params))
        this.tableData = data
        this.tableLoading = false
    }
  }
}
</script>
